<template>
	<view>
		<navbar :leftText="false" title="公告" />
		<view class="header">
			<image class="block minLogo" src="https://mall-admin.xinjiafu.net/mini-static/images/11.png" />
			<view class="header-content mt20">
				欣家服是欣家服家庭服务有限公司的简称，也是公司主打目的品牌。是一家社区居家养老，社区托青托管，社区家...
			</view>
			<view class="header-show mt20">展开</view>
		</view>

		<view class="header-main">

			<empty v-if="dataList.length===0" />
			<view class="header-main-item" v-for="item in dataList" :key="item.id" @click="wxUrl(item)">
				<view class="time">{{dayjs(item.createTime).format("YYYY年MM月DD号")}}</view>
				<view class="main flex justify-content_space-between align-item_center">
					<view class="left">
						<view class="title">{{item.title}}</view>
						<!-- <view class="argument">
							<text>阅读 18</text>
							<text>赞 18</text>
							<text>1个朋友分享</text>
						</view> -->
					</view>
					<image v-if="item.img" class="block right flex-shrink0" :src="item.img" mode="aspectFill" />
					<image v-else class="block right flex-shrink0" src="https://mall-admin.xinjiafu.net/mini-static/images/13.png" mode="aspectFill" />
				</view>
			</view>
		</view>

		<u-gap height="120rpx"></u-gap>
		<tabbar :current="1" />
	</view>
</template>

<script setup>
	import empty from "@/components/empty.vue"
	import {
		onLoad,
		onReachBottom
	} from '@dcloudio/uni-app';
	import {
		ref,
		reactive
	} from "vue"
	import {
		navigateTo
	} from "@/utils/tool.js"
	import tabbar from "@/components/tabbar.vue"
	import navbar from "@/components/navbar.vue"
	import noticeApi from "@/sheep/api/system/notice.js"
	import dayjs from "dayjs"

	onLoad(() => {
		noticeApiPage()
	})

	const wxUrl = item => {
		navigateTo(`/pages/announcement/details?id=${item.id}`)
	}

	const dataParams = reactive({
		page: 1,
		pageSize: 10
	})
	const dataTotal = ref(0);
	const dataList = ref();

	// 公告
	const noticeApiPage = () => {
		noticeApi.page(dataParams).then(res => {
			if (res.code === 0) {
				dataTotal.value = res.data.total;
				if (dataParams.page === 1) dataList.value = res.data.list;
				else dataList.value = dataList.value.concat(res.data.list)
			}
		})
	}

	onReachBottom(() => {
		if (dataList.value.length >= dataTotal.value) return;
		dataParams.page++;
		noticeApiPage()
	})
</script>

<style>
	page {
		background: #F8F3E9;
	}
</style>
<style scoped lang="scss">
	.header {
		padding: 40rpx 42rpx;

		&-main {
			&-item {
				width: 710rpx;
				height: 200rpx;
				padding: 20rpx 42rpx 25rpx 38rpx;
				opacity: 1;
				border-radius: 8rpx;
				background: #FFFFFF;
				margin: 0 auto 20rpx;
				box-sizing: border-box;

				.main {
					margin-top: 6rpx;

					.right {
						width: 112rpx;
						height: 112rpx;
						border-radius: 4rpx;
					}

					.left {
						.argument {

							text {
								font-size: 24rpx;
								font-weight: 400;
								letter-spacing: 0rpx;
								line-height: 34.76rpx;
								color: rgba(153, 153, 153, 1);
								margin-right: 20rpx;
							}
						}

						.title {
							width: 460rpx;
							font-size: 28rpx;
							font-weight: 400;
							letter-spacing: 0rpx;
							line-height: 40.54rpx;
							color: rgba(0, 0, 0, 1);
							overflow: hidden;
							white-space: nowrap;
							text-overflow: ellipsis;
						}
					}
				}

				.time {
					font-size: 24rpx;
					font-weight: 400;
					letter-spacing: 0rpx;
					line-height: 34.76rpx;
					color: rgba(153, 153, 153, 1);
				}
			}
		}

		&-show {
			font-size: 32rpx;
			font-weight: 400;
			letter-spacing: 0rpx;
			line-height: 46.34rpx;
			color: rgba(167, 37, 48, 1);
		}

		&-content {
			font-size: 32rpx;
			font-weight: 400;
			letter-spacing: 0rpx;
			line-height: 46.34rpx;
			color: rgba(0, 0, 0, 1);
		}
	}
</style>